<template>
    <div class="block">

      <el-date-picker
        v-model="value1"
        type="datetimerange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        class="pick"
      />
    </div>

  </template>

  <script lang="ts" setup>
  import { ref } from 'vue'

  const value1 = ref<[Date, Date]>([
    new Date(2000, 10, 10, 10, 10),
    new Date(2000, 10, 11, 10, 10),
  ])
  const value2 = ref('')

  const shortcuts = [
    {
      text: 'Last week',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: 'Last month',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: 'Last 3 months',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
  ]
  </script>
  <style scoped>
  .block {

    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
    margin-right: 10px;
    display: flex;
    justify-items: center;

  }
  .block:last-child {
    border-right: none;
  }
  .block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
  .pick{
    height: 40px;
  }
  </style>
